<template>
	<view class="width-100 u-text-center">
		<view class="width-70"><image class="width-70" src="https://files.yzsheng.com/bussiness/imgs/twoicon.png" mode="widthFix"></image></view>
		<view class="font-30 color-333 mt-200">本服务由通联提供</view>
		<view class="width-75"><u-line color="#eee" /></view>
		<view class="">
			手机号：
			<text class="phone">{{ phone }}</text>
		</view>
		<view class="width-80 btn-bg-yellow" @click="SendVerificationCode(1)">获取验证码</view>
		<u-popup
			v-model="codeshow"
			mode="center"
			border-radius="20"
			width="570rpx"
			height="350rpx"
			:mask-close-able="false"
			close-icon="close-circle"
			close-icon-size="40"
			:closeable="true"
			@close="closePopup"
		>
			<view class="font-34 font-bold mt-20">验证手机号码</view>
			<view class="font-22 color-999 mt-20">
				输入手机
				<text class="color-333">{{ phone }}</text>
				收到的验证码
			</view>
			<view class="font-22 color-999 mt-20" >
			<text v-if="times!==0">重新发送</text>	
			<text class="color-FBB000"  v-else @click="SendVerificationCode(2)">点击重新获取验证码</text>
				<text class="color-333" v-if="times!=0">{{ times }}s</text>
			</view>
			<u-message-input class="mt-20" :maxlength="6" v-model="code" width="70" active-color="#FBB000" mode="bottomLine" :bold="false" @finish="finishCode"></u-message-input>
	   <view class="font-22 color-EB5C02">
	   	{{errMsg}}
	   </view> 
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			codeshow: false,
			code: '',
			phone: '',
			times: 60,
			errMsg:''
		};
	},
	mounted() {
		this.phone = this.$store.state.user.userInfo.mobile.trim();
		this.userId = this.$store.state.user.userInfo.tid;
		console.log(this.userId);
	},
	onBackPress(e) {
		uni.redirectTo({
			url:'/pages_common/pages_me/assets/assetsManage/assetsManage'
		})
		return true
	},
	methods: {
		SendVerificationCode(type) {
			let data = {
				phone: this.phone,
				currentUserId: this.userId
			};
			if(type==1){
				this.codeshow = true;
			}else{
				this.times=60
			}

			this.$api.bindbank.SendVerificationCode(data).then(res => {
				console.log(res);
				this.timer = setInterval(() => {
					this.times--;
					if (this.times === 0) {
						clearInterval(this.timer);
					}
				}, 1000);
			});
		},
		closePopup(){
			clearInterval(this.timer);
		},
		finishCode(val){
			console.log(val)
			let data={
			  "phone": this.phone,
			  "verificationCode":val,
			  "currentUserId":  this.userId
			}
			this.$api.bindbank.BindPhone(data).then(res => {
				console.log(111,res);
				if(res.data.code!=-4){
					uni.navigateTo({
						url:'/pages_common/pages_me/assets/agreement/agreement?type=agree'
					})
							
				}
				clearInterval(this.timer);
			}).catch(err=>{
				this.errMsg=err
			console.log(222,err);
			clearInterval(this.timer);
			});
		}
	}
};
</script>

<style scoped lang="scss">
.width-100 {
	padding-top: 200rpx;
}
.width-75 {
	margin: 30rpx auto;
}
.width-70 {
	margin: auto;
}
.width-80 {
	height: 90rpx;
	line-height: 90rpx;
	font-size: 32rpx;
	margin-top: 400rpx;
}
.mt-200 {
	margin-top: 80rpx;
}
.phone {
	font-size: 32rpx;
	font-weight: bold;
}
.font-22 {
	font-size: 22rpx;
}
</style>
